<template>
	<div class="app-container">

		<!-- <div class="search-wrapper">
			<el-form class="search-param"  label-width="100px" size="mini">
				<el-form-item label="公司">
					<el-select v-model="comid" filterable clearable placeholder="请选择">
						<el-option v-for="item in companylist" :key="item.id" :label="item.nameCN" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="margin-left: -60px;">
					<el-button type="primary" size="mini" class="el-icon-search" @click="pageByParam">确认查询</el-button>
				</el-form-item>
			</el-form>
		</div> -->
		<vxe-toolbar :refresh="{query: reload}" export print custom>
			<template #buttons>
				<vxe-button status="success" v-if="auto.btnauto(5301)" size="mini" class="el-icon-circle-plus-outline" @click="insertEvent">新增部门</vxe-button>
				<!-- <vxe-button @click="getInsertEvent">保存</vxe-button> -->
				<!-- <vxe-button @click="getRemoveEvent">批量删除</vxe-button> -->
				<vxe-button status="primary" v-if="auto.btnauto(5302)" size="mini" @click="getUpdateEvent">保存修改</vxe-button>
			</template>
		</vxe-toolbar>

		<vxe-table :height="clientHeight-180" resizable show-overflow keep-source ref="xTable" row-id="id"
			:print-config="{}" :export-config="{}" :loading="loading"
			:tree-config="{transform: true, expandAll: true, rowField: 'id', parentField: 'parentId'}"
			:edit-config="{trigger: 'click', mode: 'row', showStatus: true}" :data="tableData">
			<vxe-column type="checkbox" width="60"></vxe-column>
			<vxe-column field="name" title="名称" tree-node></vxe-column>
			<vxe-column field="name" title="名称" :edit-render="{}">
				<template #edit="{ row }">
					<vxe-input v-model="row.name" type="text"></vxe-input>
				</template>
			</vxe-column>
			<!-- <vxe-column field="size" title="Size" :edit-render="{}">
				<template #edit="{ row }">
					<vxe-input v-model="row.size" type="text"></vxe-input>
				</template>
			</vxe-column>
			<vxe-column field="type" title="Type" :edit-render="{}">
				<template #edit="{ row }">
					<vxe-input v-model="row.type" type="text"></vxe-input>
				</template>
			</vxe-column>
			<vxe-column field="date" title="Date" :edit-render="{}">
				<template #edit="{ row }">
					<vxe-input v-model="row.date" type="date" transfer></vxe-input>
				</template>
			</vxe-column> -->
			<vxe-column title="操作" width="500" v-if="tableData.length>=1">
				<template #default="{ row }">
					<!-- <vxe-button v-if="row.parent&&row.parentId>0" type="text" status="primary" @click="insertRow(row, 'current')">插入节点</vxe-button> -->
					<!-- <vxe-button v-if="row.parent&&row.parentId==0" type="text" status="primary" @click="insertRow(row, 'top')">插入公司</vxe-button> -->
					<vxe-button v-if="row.parent&&row.parentId>=0&&auto.btnauto(5302)" type="text" status="primary"
						@click="insertRow(row, 'bottom')">插入部门</vxe-button>
					<!-- 	<vxe-button type="text" status="primary" @click="bainfo(row)">旗下电池
						</vxe-button> -->
					<vxe-button v-if="row.parentId>0&&auto.btnauto(5303)" type="text" status="primary" @click="handleDelete(row.id)">删除节点
					</vxe-button>
				</template>
			</vxe-column>
		</vxe-table>
		<!-- 旗下电池 -->
		<add-edit ref="addEdit"></add-edit>
	</div>
</template>

<script>
	import XEUtils from 'xe-utils'
	import datajson from '@/views/util/data.json'
	import {
		list,
		sava,
		getcompany,
		del
	} from './index.js'
	import addEdit from './add_edit.vue';
	export default {
		components: {
			addEdit
		},
		data() {
			return {
				loading: false,
				userinfo: {},
				comid: '',
				clientHeight: document.documentElement.clientHeight,
				tableData: [],
				companylist: []
			}
		},
		created() {
			this.getcompany();
			let userinfo = JSON.parse(localStorage.getItem("userinfo"));
			this.userinfo = userinfo;
			this.comid = userinfo.companyid;
			this.oldlist();
		},
		methods: {
			async oldlist() {
				// this.loading = true;
				// let parm = {
				// 	"address": "",
				// 	"id": this.comid,
				// 	"nameCN": "",
				// 	"nameEN": "",
				// 	"remark": ""
				// }
				// let result = await list(parm);
				//console.log("返回结果", result);
				this.loading = false;
				// this.tableData = result.obj;
				this.tableData = datajson.deplist;
			},
			//公司
			async getcompany() {
				let result = await getcompany();
				this.companylist = result.obj;
			},
			pageByParam() {
				this.oldlist()
			},
			handleDelete(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.del(id);
				})
			},
			async del(id) {
				let parm = {
					"enabled": true,
					"id": id,
					"name": "",
					"parent": true,
					"parentId": 0
				}
				let result = await del(parm);
				if (result.code == 1) {
					this.msgSuccess("删除成功");
					this.oldlist();
				}
			},
			insertEvent() {
				const $table = this.$refs.xTable
				const newRow = {
					name: '新数据',
					id: 0,
					enabled: true,
					parent: true,
					companyId: this.comid,
					parentId: 0 // 父节点必须与当前行一致
					//date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
				}
				$table.insert(newRow).then(({
					row
				}) => $table.setActiveRow(row))
			},
			async insertRow(currRow, locat) {
				const $table = this.$refs.xTable
				// 如果 null 则插入到目标节点顶部
				// 如果 -1 则插入到目标节点底部
				// 如果 row 则有插入到效的目标节点该行的位置
				if (locat === 'current') {
					const record = {
						name: '新数据',
						id: 0,
						enabled: true,
						parent: true,
						companyId: this.userinfo.companyid,
						parentId: currRow.parentId, // 父节点必须与当前行一致
						//date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
					}
					const {
						row: newRow
					} = await $table.insertAt(record, currRow)
					await $table.setActiveRow(newRow) // 插入子节点
				} else if (locat === 'top') {
					const record = {
						name: '新数据',
						id: 0,
						enabled: true,
						parent: true,
						companyId: this.userinfo.companyid,
						parentId: currRow.id, // 需要指定父节点，自动插入该节点中
						//date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
					}
					const {
						row: newRow
					} = await $table.insert(record)
					await $table.setTreeExpand(currRow, true) // 将父节点展开
					await $table.setActiveRow(newRow) // 插入子节点
				} else if (locat === 'bottom') {
					const record = {
						name: '新数据',
						id: 0,
						enabled: true,
						parent: false,
						companyId: this.userinfo.companyid,
						parentId: currRow.id, // 需要指定父节点，自动插入该节点中
						//date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
					}
					const {
						row: newRow
					} = await $table.insertAt(record, -1)
					await $table.setTreeExpand(currRow, true) // 将父节点展开
					await $table.setActiveRow(newRow) // 插入子节点
				}
			},
			async removeRow(row) {
				const $table = this.$refs.xTable
				await $table.remove(row)
			},
			reload() {
				const $table = this.$refs.xTable
				// 清除所有状态
				$table.clearAll()
				return this.findList()
			},
			//旗下电池
			bainfo(e){
				console.log(e);
				this.$refs.addEdit.open(e);
			},
			getInsertEvent() {
				const $table = this.$refs.xTable
				const insertRecords = $table.getInsertRecords()
				this.$XModal.alert(insertRecords.length)
			},
			getRemoveEvent() {
				const $table = this.$refs.xTable
				const removeRecords = $table.getRemoveRecords()
				this.$XModal.alert(removeRecords.length)
			},
			getUpdateEvent() {
				const $table = this.$refs.xTable
				const insertRecords = $table.getInsertRecords()
				const updateRecords = $table.getUpdateRecords()
				let parmlist = [];
				parmlist = parmlist.concat(insertRecords);
				parmlist = parmlist.concat(updateRecords);
				console.log(parmlist)
				this.sava(parmlist);

			},
			async sava(parmlist) {
				let result = await sava(parmlist);
				if (result.code == 1) {
					this.msgSuccess("保存成功");
					this.oldlist();
				}
			}

		}
	}
</script>

<style>
</style>
